<template>
  <div class="metadata-overview">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>元数据概览</span>
            </div>
          </template>
          
          <el-row :gutter="20" class="statistics">
            <el-col :span="6">
              <div class="statistic-card">
                <div class="icon">
                  <div class="i-carbon-database text-4xl text-blue-500"></div>
                </div>
                <div class="content">
                  <h3>数据源总数</h3>
                  <div class="number">{{ statistics.dataSources }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="statistic-card">
                <div class="icon">
                  <div class="i-carbon-table text-4xl text-green-500"></div>
                </div>
                <div class="content">
                  <h3>数据对象总数</h3>
                  <div class="number">{{ statistics.dataObjects }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="statistic-card">
                <div class="icon">
                  <div class="i-carbon-data-enrichment text-4xl text-orange-500"></div>
                </div>
                <div class="content">
                  <h3>字段总数</h3>
                  <div class="number">{{ statistics.fields }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="statistic-card">
                <div class="icon">
                  <div class="i-carbon-flow text-4xl text-purple-500"></div>
                </div>
                <div class="content">
                  <h3>关联关系</h3>
                  <div class="number">{{ statistics.relations }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-4">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>数据源分布</span>
            </div>
          </template>
          <div id="dataSourceChart" style="height: 350px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>数据对象增长趋势</span>
            </div>
          </template>
          <div id="dataObjectTrendChart" style="height: 350px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-4">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>最近更新的数据对象</span>
              <el-button type="text" @click="goToDataObjects">查看全部</el-button>
            </div>
          </template>
          <el-table :data="recentUpdates" style="width: 100%">
            <el-table-column prop="name" label="对象名称" width="180" />
            <el-table-column prop="sourceName" label="所属数据源" width="180" />
            <el-table-column prop="type" label="对象类型" width="120">
              <template #default="scope">
                <el-tag>{{ scope.row.type }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="owner" label="负责人" width="120" />
            <el-table-column prop="updateTime" label="更新时间" width="180" />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="text" size="small" @click="goToDetail(scope.row.id)">
                  查看详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'

const router = useRouter()

// 统计数据
const statistics = ref({
  dataSources: 15,
  dataObjects: 256,
  fields: 3827,
  relations: 124
})

// 最近更新数据
const recentUpdates = ref([
  {
    id: '1',
    name: 'user_info',
    sourceName: 'MySQL业务库',
    type: '表',
    owner: '张三',
    updateTime: '2023-06-15 15:30:00'
  },
  {
    id: '2',
    name: 'order_detail',
    sourceName: 'MySQL业务库',
    type: '表',
    owner: '李四',
    updateTime: '2023-06-14 11:25:32'
  },
  {
    id: '3',
    name: 'product_catalog',
    sourceName: 'PostgreSQL产品库',
    type: '表',
    owner: '王五',
    updateTime: '2023-06-13 09:18:45'
  },
  {
    id: '4',
    name: 'user_behavior',
    sourceName: 'Hive数据仓库',
    type: '表',
    owner: '赵六',
    updateTime: '2023-06-12 16:42:11'
  },
  {
    id: '5',
    name: 'daily_sales',
    sourceName: 'ClickHouse分析库',
    type: '表',
    owner: '孙七',
    updateTime: '2023-06-11 14:30:25'
  }
])

onMounted(() => {
  initDataSourceChart()
  initDataObjectTrendChart()
})

// 初始化数据源分布图表
const initDataSourceChart = () => {
  const chartDom = document.getElementById('dataSourceChart')
  if (!chartDom) return
  
  const chart = echarts.init(chartDom)
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['MySQL', 'PostgreSQL', 'Oracle', 'SQL Server', 'Hive', 'ClickHouse', '其他']
    },
    series: [
      {
        name: '数据源分布',
        type: 'pie',
        radius: '70%',
        center: ['50%', '50%'],
        data: [
          { value: 5, name: 'MySQL' },
          { value: 3, name: 'PostgreSQL' },
          { value: 2, name: 'Oracle' },
          { value: 1, name: 'SQL Server' },
          { value: 2, name: 'Hive' },
          { value: 1, name: 'ClickHouse' },
          { value: 1, name: '其他' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  
  chart.setOption(option)
}

// 初始化数据对象趋势图表
const initDataObjectTrendChart = () => {
  const chartDom = document.getElementById('dataObjectTrendChart')
  if (!chartDom) return
  
  const chart = echarts.init(chartDom)
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['表', '视图', 'API']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '表',
        type: 'line',
        stack: '总量',
        data: [120, 132, 145, 160, 178, 190]
      },
      {
        name: '视图',
        type: 'line',
        stack: '总量',
        data: [50, 54, 60, 68, 75, 80]
      },
      {
        name: 'API',
        type: 'line',
        stack: '总量',
        data: [15, 20, 25, 30, 35, 40]
      }
    ]
  }
  
  chart.setOption(option)
}

// 查看数据对象列表
const goToDataObjects = () => {
  router.push('/metadata/dataobject')
}

// 查看数据对象详情
const goToDetail = (id: string) => {
  router.push({
    path: '/metadata/DataObjectDetail',
    query: { id }
  })
}
</script>

<style scoped lang="scss">
.metadata-overview {
  padding: 20px;
  
  .mt-4 {
    margin-top: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .statistics {
    .statistic-card {
      display: flex;
      align-items: center;
      padding: 10px;
      
      .icon {
        margin-right: 15px;
      }
      
      .content {
        h3 {
          margin: 0 0 5px 0;
          font-size: 14px;
          color: #606266;
        }
        
        .number {
          font-size: 24px;
          font-weight: bold;
          color: #303133;
        }
      }
    }
  }
}
</style> 